<template>
  <div>
    <div class="searchheader">
      <div class="button" @click="$router.go(-1)">
        <div class="iconfont icon-arrow-left-bold"></div>
      </div>
      <input
        type="text"
        placeholder="搜索歌曲、歌手"
        v-model="searchdata"
        @change="search"
      />
      <span class="iconfont icon-cha cha" v-show="!searchflag" @click="close"></span>
    </div>

    <div v-show="!searchflag" class="serachresult">
      <div class="mate"> 
        <div class="title"><span>最佳匹配</span></div>
        <div class="matesinger" @click="playsing(slist.artist.id)" v-if="slist" >
          <img :src="slist.artist.img1v1Url" alt="">
          <h1>歌手：</h1>
          <span>{{slist.artist.name}}</span>
        </div>
        <div class="matelist" @click="playsheet(musiclist.id)">
          <img :src="musiclist.coverImgUrl" alt="">
          <h1>歌单：</h1>
          <span>{{musiclist.name}}</span>
        </div>

      </div>
      <ul>  
        <li  v-for="(item,index) in serchlist" :key="index"  @click="playmusic(item,item.id,item.name,item.ar)">
            <h1>{{item.name}}</h1>
            <h2  >
              <span v-for="(key,index) in item.ar" :key="index">{{key.name}} &nbsp;&nbsp;</span>
            </h2>
        </li>
      </ul>
    </div>

    <div class="hotword">
      <div class="title">热门搜索</div>
      <ul>
        <li v-for="(item, index) in hotlist" :key="index" @click="serchclick($event)">{{ item.first }}</li>
      </ul>
    </div>

    <div class="history">
      <div class="historyheader">
        <div class="title">搜索历史</div>
        <div class="delall">
          <div class="iconfont icon-shanchu" @click="delAll"></div>
        </div>
      </div>

      <div class="historylists">
        <ul>
          <li v-for="(item,index) in historylist" :key="index" > 
            <span @click="serchclick($event)">{{item}}</span>
            <div class="del">
              <div class="iconfont icon-cha" @click="del(index)"></div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getHot, getSearch ,getRank} from "../api/search";
import { getArtist } from "../api/singer";

export default {
  data() {
    return {
      hotlist: "",
      searchdata: "",
      serchlist:"",
      searchflag:true,
      // historylist:[],
      musiclist:"",
      slist:""
    };
  },
  methods: {
    getHotFun() {
      getHot().then((data) => {
        this.hotlist = data.result.hots;
        // console.log(this.hotlist);
      });
    },
    search() { 
      if(this.searchdata){
        console.log(111);
        getSearch({ keywords: this.searchdata }).then((data) => {
        this.serchlist = data.result.songs
        let rankid = data.result.songs[0].id
        let singerid = data.result.songs[0].ar[0].id
        getArtist({id:singerid}).then((data)=>{
          this.slist = data
          console.log( this.slist);
        })
        getRank({ id : rankid}).then((data)=>{
          this.musiclist = data.playlists[0]
          console.log(this.musiclist);
        });
        console.log(this.serchlist);
      });
      this.searchflag=false
      this.historylist.push(this.searchdata)
      }else{
        this.searchflag=true
      }
      // console.log(this.serchlist);
      this.$store.commit("sethistorylist",this.historylist)
    },
    serchclick(event){
      this.searchdata = event.currentTarget.innerText
      this.search()
      // getSearch({ keywords: event.currentTarget.innerText }).then((data) => {
      //   this.serchlist = data.result.songs
      //   // console.log(this.serchlist);
      // })
    },
    delAll(){
      this.historylist.splice(0,this.historylist.length)
      this.$store.commit("sethistorylist",this.historylist)
    },
    del(index){
      this.historylist.splice(index,1)
      this.$store.commit("sethistorylist",this.historylist)
    },
    playmusic(item,id,name,ar){
            let playMusicData = {
                coverImgUrl:item.al.picUrl,
                id,
                name,
                ar,
                tracks:this.serchlist
            }
            // console.log(this.serchlist[index].artists[0].name);
            // 数据存存储
        this.$store.commit("musicDatafun",playMusicData)
        let musciclists  = JSON.parse(JSON.stringify(playMusicData))
        this.$store.commit("musicListfun",musciclists);
            this.searchflag=true
            // this.showplay=true
        },
      playsheet(id){
         this.$router.push({
                path:"/recommend/musiclist",
                query:{id}
          })
      },
      playsing(id){
        this.$router.push({
          path:"/singer/singerlist",
          query:{id}
        })
      },
      close(){
        this.searchflag=true
        this.searchdata = ""
      }
  },
  computed:{
    historylist(){
      return this.$store.state.historylist
    }
  },
  created() {
    this.getHotFun();
  },
};
</script>

<style lang="less"> 
.searchheader {
  position: absolute;
  top: 0;
  left: 0;
  height: 70px;
  width: 100%;
  background-color: #2CBCEE;
  .button {
    position: absolute;
    left: 24px;
    top: 20px;
    div {
      color: #fff;
      font-size: 26px;
    }
  }
  input {
    position: absolute;
    left: 65px;
    top: 20px;
    height: 32px;
    width: 512px;
    background-color: #2CBCEE;
    border: none;
    border-bottom: 2px solid #e8ccca;
    color: #eeb7b3;
  }
  .cha{
    position: absolute;
    right: 20px;
    top:20px;
    font-size: 40px;
  }
}
.hotword {
  position: absolute;
  top: 105px;
  left: 37px;
  width: 560px;
  height: 140px;
  overflow: hidden;
  // background-color: aqua;
  .title {
    position: absolute;
    top: 0;
    left: 0;
    color: #8f9090;
    font-size: 20px;
  }
  ul {
    position: absolute;
    top: 40px;
    left: 0;
    margin-right: -11px;
    li {
      float: left;
      height: 39px;
      line-height: 39px;
      text-align: center;
      padding: 0 7px;
      margin-right: 11px;
      margin-bottom: 11px;
      border: 2px solid #d4d4d4;
      border-radius: 5px;
      font-size: 22px;
      color: #232426;
    }
  }
}
.history {
  position: absolute;
  top: 276px;
  left: 37px;
  width: 560px;
  .historyheader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 26px;
    .title {
      float: left;
      font-size: 20px;
      color: #8f9090;
    }
    .delall {
      float: right;
      div{
        font-size: 20px;
      }
    }
  }
  .historylists {
    position: absolute;
    top: 50px;
    left: 0;
    width: 100%;
    li {
      margin: 32px 0;
      width: 100%;
      font-size: 22px;
      line-height: 29px;
      .del {
        float: right;
        div{
          font-size: 30px;
        }
      }
    }
  }
}
.serachresult {
  position: absolute;
  top: 70px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 1);
  z-index: 30;
  .mate{
    width: 100%;
    height: 252px;
    // background-color: aqua;
    .title{
      width: 100%;
      height: 46px;
      line-height: 46px;
      span{
        margin-left: 30px;
        color: #D84F47;
        font-size: 18px;
      }
    }
    .matesinger{
      display: flex;
      width: 610px;
      height: 79px;
      line-height: 79px;
      padding-top: 13px;
      padding-bottom: 10px;
      padding-left: 30px;
      border-bottom: 3px solid #E1E1E1;
      img{
        width: 78px;
        height: 78px;
      }
      h1{
        margin-left: 22px;
        font-weight: normal;
        font-size: 24px;
      }
      span{
        font-size: 16px;
      }
    }
    .matelist{
      display: flex;
      width: 610px;
      height: 79px;
      line-height: 79px;
      padding-top: 13px;
      padding-bottom: 10px;
      padding-left: 30px;
      // text-indent: 1em;
      border-bottom: 3px solid #E1E1E1;
      img{
        width: 78px;
        height: 78px;
      }
      h1{
        margin-left: 22px;
        font-weight: normal;
        font-size: 24px;
      }
      span{
        font-size: 16px;
      }
    }
  }
  li {
    height: 66px;
    width: 100%;
    padding-top: 15px;
    border-bottom: 2px solid #E2E2E2;
    text-indent: 2em ;
    h1 {
      font-size: 18px;
      // font-weight: bold;
    }
    h2 {
      margin-top: 10px;
      font-size: 14px;
      color: #6F6F70;
      font-weight: normal;
    }
  }
}
</style>